<template>
  <div class="app-container">
    <div v-permiss="['38302010']" class="filterDiv tx-r">
      <el-button size="small" round type="primary" :disabled="disabledStatus" @click="saveData">保存</el-button>
    </div>
    <div class="contentDiv">
      <el-table :key="tableKey" v-loading="listLoading" :data="tableData" border fit highlight-current-row style="width: 100%;" size="small">
        <el-empty slot="empty" :image-size="120" />
        <el-table-column label="项目" min-width="260" align="left">
          <template slot-scope="{row}">
            <span>{{ row.cashFlowName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="行次" align="center">
          <template slot-scope="{row}">
            <span>{{ row.lineNo }}</span>
          </template>
        </el-table-column>
        <el-table-column label="本期金额" align="right">
          <template slot-scope="{row}">
            <span style="padding-right:10px">{{ row.periodNetAmount || '' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="本年累计金额" align="right">
          <template slot-scope="{row}">
            <input v-model="row.yearNetAmount" class="tx-r" style="padding-right:10px" :disabled="row.type==0" @focus="$event.target.select()" />
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { getCashFlowSumOpening, updateListForSetYearNetAmount, getOpeningBalanceStatus } from '@/api/report'
export default {
  name: 'ReportFlowstart',
  data() {
    return {
      tableKey: 0,
      periodList: [],
      tableData: [],
      total: 0,
      listLoading: true,
      disabledStatus: true,
      listQuery: {}
    }
  },
  created() {
    this.getList()
    getOpeningBalanceStatus().then(res => {
      this.disabledStatus = res.data.data === '0'
    })
  },
  methods: {
    getList() {
      this.listLoading = true
      getCashFlowSumOpening(this.listQuery).then((res) => {
        this.listLoading = false
        this.tableData = res.data.data || []
        this.tableData.forEach(item => {
          item.periodNetAmount = item.periodNetAmount || 0
          item.yearNetAmount = item.yearNetAmount || null
        })
      }).catch(() => {
        this.listLoading = false
      })
    },
    saveData() {
      const obj = this.tableData.map(item => {
        return {
          id: item.id,
          type: item.type,
          cashFlowCode: item.cashFlowCode,
          cashFlowId: item.cashFlowId,
          yearNetAmount: item.yearNetAmount
        }
      })
      updateListForSetYearNetAmount(obj).then(res => {
        this.$message.success('期初保存完成!')
      })
    }
  }
}
</script>
<style scoped>
.label {
  text-align: right;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
}
input {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 12px;
  padding-right: 8px;
  border: none;
}
input[disabled] {
  background: #f9f9f9;
}
>>> .tx-r input {
  text-align: right;
}
>>> .el-table .cell {
  padding: 0;
  height: 32px;
}
>>> .el-table td {
  padding: 0px;
}

</style>
